<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/welcome' }">权限管理</el-breadcrumb-item>
			<el-breadcrumb-item>角色管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row>
				<el-col style="margin-bottom: 30px;">
					<el-form :inline="true" :model="formInline" class="demo-form-inline">
						<el-form-item label="姓名">
							<el-input v-model="formInline.Name"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i></el-button>
							<el-button type="success" @click="ADD"><i class="el-icon-circle-plus"></i></el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-table border :data="roList">
				<el-table-column label="角色编号" prop="Id"></el-table-column>
				<el-table-column label="角色名" prop="Name"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" icon="el-icon-setting" @click="MokuaiSetRightDialog(scope.row)">模块权限
						</el-button>
						<el-button type="warning" icon="el-icon-edit" @click="showBox(scope.row)">编辑
						</el-button>
						<el-button type="danger" icon="el-icon-delete" @click="DELETE(scope.row.Id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				background :page-sizes="[5, 10, 15, 20]" :page-size="limit"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
			<!-- 新增 -->
			<el-dialog title="新增角色" :visible.sync="dialogFormVisible" @close="AClose">
				<el-form :model="addform" :rules="addFormRules" ref="addFormRef">
					<el-form-item label="姓名" prop="Name" label-width="80px">
						<el-input v-model="addform.Name"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="SUREADD">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 修改 -->
			<el-dialog title="编辑角色" :visible.sync="editdialogFormVisible">
				<el-form :model="editform" :rules="editFormRules" ref="editFormRef">
					<el-form-item label="角色姓名" prop="Name" label-width="80px">
						<el-input v-model="editform.Name"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button v-on:click="editdialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="SureEdit">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 模块管理的对话框 -->
			<el-dialog title="你正在设置角色模块" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
				<div>
					<p>当前的角色:{{roleInfo.Name}}</p>
					<p>
						<el-tree :data="roleslist" show-checkbox node-key="Id" :default-checked-keys="value" ref="tree"
							:props="defaultProps">
						</el-tree>
					</p>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="setRoleDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
				</span>
			</el-dialog>

		</el-card>
	</div>
</template>
<script>
	export default {
		data() {
			//验证邮箱的规则
			var checkEmail = (rule, value, cb) => {
				//验证邮箱的正则表达式
				const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (regEmail.test(value)) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			//验证手机号的规则
			var checkMobile = (rule, value, cb) => {
				//验证手机号的正则表达式
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					//合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的手机号'))
			}
			return {
				addFormRules: {
					Name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 6,
							message: '角色名的长度在2~6个字符之间',
							trigger: 'blur'
						}
					]
				},
				editFormRules: {
					Name: [{
							required: true,
							message: '请输入角色名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 6,
							message: '角色名的长度在2~6个字符之间',
							trigger: 'blur'
						}
					]
				},
				formInline: {
					Name: ''
				},
				page: 1,
				limit: 5,
				count: 0,
				roList: [],
				dialogFormVisible: false,
				addform: {
					Name: ''
				},
				editdialogFormVisible: false,
				editform: {
					Name: ''
				},
				//控制模块对话框的显示和隐藏
				setRoleDialogVisible: false,
				roleslist: {},
				list: [],
				ruleForm: {
					Name: ''
				},
				roleInfo: {},
				defaultProps: {
					children: 'children',
					label: 'Name'
				},
				value: [],
				Ids: [],
			}
		},
		created() {
			this.GetRoleList()
		},
		methods: {
			//展示模块管理的对话框
			async MokuaiSetRightDialog(row) {
				this.roleInfo = row
				const {
					data: res
				} = await this.$axios.get('/api/api/Role/GetAllModules')
				if (res.code !== 0) {
					this.$message.error("获取全部模块失败")
				}
				this.roleslist = res.data;
				const {
					data: ress
				} = await this.$axios.post('/api/api/Role/GetMyModules', this.roleInfo)
				if (res.code !== 0) {
					return this.$message.error('获取模块列表失败！')
				}
				this.value = ress.data;
				this.setRoleDialogVisible = true;
			},
			//点击按钮 ，分配角色
			async saveRoleInfo() {
				this.Ids = this.$refs.tree.getCheckedKeys();
				const {
					data: res
				} = await this.$axios.get('/api/api/Role/EditRM', {
					params: {
						Id: this.roleInfo.Id,
						Value: this.Ids.toString()
					}
				})
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				//刷新数据列表
				this.GetRoleList();
				//隐藏对话框
				this.setRoleDialogVisible = false
			},
			//监听分配角色对话框的关闭事件
			setRoleDialogClosed() {
				this.value = []
				this.userinfo = {}
				this.selectedRoleId = '';
			},
			ADD() {
				this.dialogFormVisible = true;
			},
			AClose() {
				this.$refs.addFormRef.resetFields();
			},
			SUREADD() {
				this.$refs.addFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					this.$axios.post('/api/api/Role/AddRole', _this.addform).then(function(res) {
						if (res.data.code == 0) {
							_this.dialogFormVisible = false;
							_this.GetRoleList();
							_this.$message.success(res.data.msg);
						} else if (res.data.code == -2) {
							_this.$message.error(res.data.msg);
						} else {
							_this.$message.error(res.data.msg);
						}
					}).catch(function(err) {
						_this.$message.error(res.data.msg);
					})
				})
			},
			onSubmit() {
				this.GetRoleList()
			},
			GetRoleList() {
				let _this = this;
				this.$axios.get('/api/api/Role/GetRoList', {
					params: {
						page: _this.page,
						limit: _this.limit,
						Name: _this.formInline.Name
					}
				}).then(function(res) {
					console.log(res);
					_this.roList = res.data.data;
					_this.count = res.data.count;
				}).catch(function(res) {
					console.log(res);
				});
			},
			handleSizeChange(newSize) {
				console.log(newSize)
				this.limit = newSize
				this.GetRoleList()
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage)
				this.page = newPage
				this.GetRoleList()
			},
			//修改地址对话框
			showBox(row) {
				console.log(row);
				this.editform = row;
				this.editdialogFormVisible = true
			},
			SureEdit() {
				this.$refs.editFormRef.validate(vali => {
					if (!vali) return;
					let _this = this;
					axios.post('/api/api/Role/EditRole', _this.editform).then(function(res) {
						if (res.data.code == 0) {
							_this.editdialogFormVisible = false;
							_this.GetRoleList();
							_this.$message.success(res.data.msg);
						} else if (res.data.code == -2) {
							_this.$message.error(res.data.msg);
						} else {
							_this.$message.error(res.data.msg);
						}
					}).catch(function(err) {
						_this.$message.error(err.data.msg);
					})
				})
			},
			async DELETE(Id) {
				const delresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消删除！')
				}
				let _this = this;
				_this.$axios.post('/api/api/Role/DelRole', {
					Id: Id
				}).then(function(res) {
					if (res.data.code == 0) {
						_this.GetRoleList();
						_this.$message.success("删除成功！");
					} else if (res.data.code == -2) {
						_this.$message.error(res.data.msg);
					} else if (res.data.code == -3) {
						_this.$message.error(res.data.msg);
					} else {
						_this.$message.error(res.data.msg);
					}
				}).catch(function(err) {
					_this.$message.error("删除失败！");
				})

			}

		}
	}
</script>

<style>
</style>
